<template>
  <!-- 宿舍入住信息页面 -->
  <div class="app-container">
    <!-- 房间统计图 -->
    <div class="chartBox">
      <div class="chartBox-title">
        宿舍楼已住满和未住满房间数统计
      </div>
      <div class="chartBox-content" id="roomChart"></div>
    </div>
    <!-- 床位统计图 -->
    <div class="chartBox">
      <div class="chartBox-title">
        宿舍楼已入住和未入住床位数统计
      </div>
      <div class="chartBox-content" id="bedChart"></div>
    </div>
    <!-- 专业学生宿舍分配情况统计 -->
    <div class="chartBox">
      <div class="chartBox-title">
        专业下学生已分配宿舍和未分配宿舍人数统计
      </div>
      <div class="chartBox-content" id="specialityStatistics"></div>
    </div>
    <!-- 专业新生宿舍分配情况统计 -->
    <div class="chartBox">
      <div class="chartBox-title">
        专业下新生已分配宿舍和未分配宿舍人数统计
      </div>
      <div class="chartBox-content" id="newStuStatistics"></div>
    </div>
  </div>
</template>

<script>
import { 
  getBedStatistics,
  getRoomStatistics,
  getSpecialityStatistics,
  getSpecialityNewStuStatistics
} from "@/api/apartment/statistics";
import * as echarts from 'echarts'
export default {
  components: {  },

  data() {
    return {
    };
  },
  created() {

  },
  mounted() {
    this.bedStatistics()
    this.roomStatistics()
    this.specialityStatistics()
    this.specialityNewStuStatistics()
  },
  methods: {
    // 床位统计
    bedStatistics(){
      getBedStatistics().then((res) => {
        const {data,code} = res
        const legend = data.ydata.map((item)=>{
          return item.name
        })
        const series = data.ydata.reduce((pre, item)=>{
          pre.push({
            name: item.name,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: item.value,
            itemStyle: {
              color: item.name.includes('已入住') ? '#67c23a': '#e6a23c'
            }
          })
          return pre
        }, [])
        if(code == 200){
          this.initChart({
            id: 'bedChart',
            legend: legend,
            xdata: data.xdata || [],
            series: series
          })
        }
      })
    },
    // 房间数量统计
    roomStatistics(){
      getRoomStatistics().then((res) => {
        const {data,code} = res
        const legend = data.ydata.map((item)=>{
          return item.name
        })
        const series = data.ydata.reduce((pre, item)=>{
          pre.push({
            name: item.name,
            type: 'bar',
            stack: 'vistors',
            barWidth: '50%',
            data: item.value,
            itemStyle: {
              color: item.name.includes('已住满') ? '#67c23a': '#e6a23c'
            }
          })
          return pre
        }, [])
        if(code == 200){
          this.initChart({
            id: 'roomChart',
            legend: legend,
            xdata: data.xdata || [],
            series: series
          })
        }
      })
    },
    specialityStatistics(){
      getSpecialityStatistics().then((res) => {
        const {data,code} = res
        const legend = data.ydata.map((item)=>{
          return item.name
        })
        const series = data.ydata.reduce((pre, item)=>{
          pre.push({
            name: item.name,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: item.value,
            itemStyle: {
              color: item.name.includes('已分配') ? '#67c23a': '#e6a23c'
            }
          })
          return pre
        }, [])
        if(code == 200){
          this.initChart({
            id: 'specialityStatistics',
            legend: legend,
            xdata: data.xdata || [],
            series: series
          })
        }
      })
    },
    specialityNewStuStatistics(){
      getSpecialityNewStuStatistics().then((res) => {
        const {data,code} = res
        const legend = data.ydata.map((item)=>{
          return item.name
        })
        const series = data.ydata.reduce((pre, item)=>{
          pre.push({
            name: item.name,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: item.value,
            itemStyle: {
              color: item.name.includes('已分配') ? '#67c23a': '#e6a23c'
            }
          })
          return pre
        }, [])
        if(code == 200){
          this.initChart({
            id: 'newStuStatistics',
            legend: legend,
            xdata: data.xdata || [],
            series: series
          })
        }
      })
    },
    // 获取搜索表单提交的数据
    onSearch(val) {
      // 查询条件和分页数据合并
      const arr = Object.assign(this.queryParams, val);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    onReset(data) {
      this.queryParams.pageNum = 1;
      const arr = Object.assign(this.queryParams, data);
      this.getList();
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
    },

    // 渲染echart 图表
    initChart(props) {
      const option = {
        legend:{
          data: props.legend
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            magicType: {
              type: ['stack']
            },
            dataView: {}
          }
        },
        grid: {
          top: '12%',
          left: '2%',
          right: '2%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: props.xdata,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: props.series
      }
      if (props.xdata && props.xdata.length > 30) {
        option.dataZoom = [
        {
          type: 'slider',
          start: 0,
          end: Math.floor((20/props.xdata.length)*100)
        },
        {
          start: 0,
          end: Math.floor((20/props.xdata.length)*100)
        }
        ]
      }
      this.chart = echarts.init(document.getElementById(props.id))
      this.chart.setOption(option)
    }
  },
};
</script>

<style lang="scss" scoped>
#barChart {
  width: 100%;
  height: 300px;
}
.chartBox{
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  & + .chartBox{
    margin-top: 15px;
  }
  &-title{
    height: 25px;
    line-height: 25px;
    padding: 0 20px;
    border-bottom: 1px solid #EBEEF5;
  }
  &-content{
    height: 300px;
  }
}
</style>